<template>
	<view class="classify">
		<!-- <swiper class="imgsBanner_swiper" :current='currentIndex' circular="true">
			<swiper-item v-for="(item,index) in info.images" :key='index'>
				<image :src="item"></image>
			</swiper-item>
		</swiper> -->
		<view style="position: relative;background-color:#FDE1DD;">
			<view class="shop_head">
				<image :src="info.image" class="shop_img"></image>

				<view>
					<view class="shop_name">{{info.nickname}}</view>
					<view class="label_box">
						<view class="label" v-for="(items,indexs) in info.label" :key="indexs">
							{{items.name}}
						</view>
					</view>
					<view class="time_box">
						<text>营业时间: {{info.start}}-{{info.end}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <view style="height: 70rpx;"></view> -->


		<view class="tab_box">
			<view :class="['tab_info',tabCheck==item.id?'tab_check':'']" @click="setTabCheck(item)"
				v-for="(item,index) in tabs">
				{{item.name}}
			</view>
		</view>

		<view class="classify_good" v-if="tabCheck==1">

			<view class="right_area " style="position: fixed;z-index:99;">
				<u-tabs :list="secondCate" :showBar="false" :current="activeTab" @change="changeSecond"
					v-if="secondCate.length!=1" :show-bar="false"></u-tabs>
			</view>
			<view style="height: 80rpx;" v-if="secondCate.length!=1"></view>
		</view>

		<v-tabs-column v-if="tabCheck==1&&tabHeight&&headHeight" activeColor='#f44b44' :tabs="firstCate"
			:height="tabHeight+swHeight+headHeight" v-model="kind" field="name" @change="changeFirst" position="left">
			<scroll-view :style="'height calc(100vh -'+(tabHeight+swHeight+headHeight)+'px -50px)'" @scrolltolower="pageList()" :show-scrollbar="false" :scroll-y="true" v-if="bitmap"
				class="all-good" style="width: 550rpx;">
				<my-profile v-for="(item,index) in list" :key="index" :wares="item" class="single_good"></my-profile>
			</scroll-view>
			<view v-else class="bitmap" style="width: 550rpx;">
				<view style="height:150rpx;"></view>
			</view>
		</v-tabs-column>

        <view v-if="tabCheck==2">
			
			<view class="site_box" @click="setDh()">
				<view class="site_name">{{info.nickname}}</view>
				<view class="site" >
					<u-icon color="#838383" name="map"></u-icon>
					<view>{{info.site}} ></view>
				</view>
			</view>
			
			<view style="margin-top: 20rpx;" class="site_box" v-if="info.content">
				<rich-text :nodes="info.content" ></rich-text>
			</view>
			
		</view>
          
	


	</view>

</template>

<script>
	import ctabs from '@/components/san-tabs/san-tabs.vue'
	import tabs2 from '../../components/v-tabs-column/v-tabs-column.vue';
	export default {
		components: {
			tabs2,
			ctabs
		},
		data() {
			return {
				id: '',
				info: '',
				currentIndex: 0,
				activeTab: 0,
				tabCheck: 1,
				tabs: [{
					name: '商品',
					id: 1
				}, {
					'name': '商家',
					id: 2
				}],

				kind: 0,
				cateId: '',
				page: 1,
				firstCate: [],
				secondCate: [],
				moreSecond: true,
				bitmap: true,
				activeTab: 0,
				list: [],
				cartware: [],
				index: '',
				tabHeight: 0,
				headHeight: 0,
				swHeight: 0
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			this.getInfo();

		},
		mounted() {

			this.$nextTick(() => {
				this.getElementHeight(1);
				this.getElementHeight(2);
				//this.getElementHeight(3);
			});


		},
		methods: {
			getElementHeight(type) {
				const query = uni.createSelectorQuery();

				if (type == 1) {
					query.select('.tab_box').boundingClientRect(data => {
						this.tabHeight = data.height;
						
						console.log(data.height,1);
						
					}).exec();
				}
				if (type == 2) {
					query.select('.shop_head').boundingClientRect(data => {
						this.headHeight = data.height;
						console.log(data.height,2);
					}).exec();
				}
				if (type == 3) {
					query.select('.imgsBanner_swiper').boundingClientRect(data => {
						this.swHeight = data.height;
						console.log(data.height,3);
					}).exec();
				}

			},
			setDh() {
				uni.openLocation({
					latitude: Number(this.info.lat),
					longitude: Number(this.info.lng),
					name: this.info.nickname,
					address: this.info.site,
					fail(error) {
						console.log(error)
					}
				})
			},

			setTabCheck(e) {

				console.log(e);

				this.tabCheck = e.id;
			},
			//查找索引
			findIndex(obj, dest) {
				for (let i in obj) {
					if (obj[i].id == dest) {
						return i
					}
				}
			},
			//一级分类
			goodCate() {
				let {
					classId
				} = getApp().globalData;
				this.$get(this.$api.goodCate, {
					admin_id: this.info.id
				}, (res) => {
					let {
						data
					} = res;

					if (data.code == 1) {
						//返回索引
						let newData = data.data;
						let arr = [{
							name: '全部',
							id: ''
						}]

						arr.push(...data.data);
						this.firstCate = arr;
						let index = this.findIndex(this.firstCate, classId);
						this.kind = index ? index : 0;

						this.cateId = classId ? classId : this.firstCate[0].id;
						this.goodSecondCate();
						this.getGoods();
					}
				})
			},
			//二级分类
			goodSecondCate() {
				this.activeTab = 0;
				this.$get(this.$api.goodChild_cate, {
					cate_id: this.cateId,
					admin_id: this.info.id
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let arr = [{
							name: '全部',
							id: this.cateId
						}]
						arr.push(...data.data);

						this.secondCate = arr;
					}
				})
			},
			getGoods() {
				let params = {
					cate_id: this.cateId,
					page: this.page,
					admin_id: this.info.id
				}

				this.$get(this.$api.goodCateGood, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = data.data;
						if (this.page == 1) {
							this.bitmap = data.data.length ? true : false;
						}
					}

				}, true)
			},
			//分类商品
			getGood() {
				let params = {
					cate_id: this.cateId,
					page: this.page
				}

				this.$get(this.$api.goodCateGood, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = this.list.concat(data.data);
						if (this.page == 1) {
							this.bitmap = data.data.length ? true : false;
						}
					}

				}, true)
			},

			// 切换一级分类
			changeFirst(index) {
				this.page = 1;
				this.list = [];
				this.activeTab = 0;
				this.secondCate = [];
				this.cateId = this.firstCate[index].id;
				this.kind = index;
				this.moreSecond = true;
				this.goodSecondCate();
				this.getGood();
			},
			// 切换二级分类
			changeSecond(index) {
				console.log(index);
				this.page = 1;
				this.list = [];
				this.activeTab = index;
				this.cateId = this.secondCate[index].id;
				this.getGood();
			},
			pageList() {
				this.page++;
				this.getGood();
			},
			getInfo() {
				this.$get(this.$api.zbShopInfo, {
					id: this.id
				}, res => {
					let {
						code,
						data,
						msg
					} = res.data;
					if (code == 1) {
						
						if (data.content) {
						
							data.content = this.$formatRichText(data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						
						}
						
						this.info = data;
						this.goodCate();
					}
				})
			}
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .active:before {
		background: #f44b44 !important;
	}

	.classify .bitmap {
		text-align: center;
		height: calc(100vh - 262.67px - 50px);
		background: white;

	}

	::v-deep .v-tabs-column__container {
		height: calc(100vh - 262.67px - 50px);
	}

	.all-good {
		height: 100%;
	}

	.imgsBanner_swiper {
		width: 100%;
		height: 260rpx;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.shop_head {
		display: flex;
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 15rpx 15rpx 0 0;
		width: 100%;
	}

	.shop_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		margin-right: 15rpx;
	}

	.shop_name {
		font-weight: bold;
		font-size: 32rpx;
	}

	.label_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		//margin-top: 10rpx;
	}

	.label {
		background-color: #EDFDE6;
		box-sizing: border-box;
		padding: 2rpx 5rpx;
		color: #2A7C2F;
		font-size: 22rpx;
		margin-right: 10rpx;
		margin-top: 15rpx;
	}

	.time_box {
		font-size: 22rpx;
		color: #666666;
		margin-top: 15rpx;
	}

	.tab_box {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		color: #666666;
		background-color: white;
	}

	.tab_info {
		margin-right: 35rpx;
	}

	.tab_check {
		color: black;
		font-weight: bold;
		border-bottom: 6rpx solid #f44b44;
	}

	page {
		background: white;
	}

	.classify {
		height: 100vh;
		//background: white;
	}

	.classify .second_name {

		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.classify .first_name {
		position: fixed;
		z-index: 5;
		/* padding-right: 20rpx; */
		width: 73.5%;
		background: white;

		.second-cate {
			margin-right: 40rpx;
			display: flex;

			flex: 1;
			align-items: center;
		}
	}

	.classify .left_area {
		width: 24.5%;
		position: fixed;
		overflow-x: scroll;
		background: #eee;
		height: 100vh;
	}

	.classify .left_area::-webkit-scrollbar {
		display: none;
	}

	.classify .right_area {
		width: 72%;
		margin-left: 26.8%;

		.second-mask {
			position: fixed;
			width: 73.5%;
			right: 0;
			background: rgba(0, 0, 0, 0.4);
			height: 100vh;
			z-index: 999;
		}
	}

	.classify>.classify_good {
		display: flex;
		background-color: white;
		/* padding-right: 20rpx; */
	}


	.classify .is_active {
		background: white;
		font-weight: bold;
		color: #57B127;
	}

	.classify .is_active .left_border {
		background: #57B127;
		width: 8rpx;
		height: 100rpx;
		position: absolute;
		left: 0;
		border-radius: 2rpx;
	}

	.mp_tab_width {
		width: 96%;
		height: 50rpx;
		padding-bottom: 6rpx;
	}


	/* #ifdef MP-WEIXIN   */
	.classify .right_area .single_good .my_profile {
		border-bottom: 1px solid #eaeaea;
	}

	.classify .right_area .single_good {
		border-bottom: 1px solid #eaeaea;
		/* padding-right: 20rpx; */
	}

	/* #endif */



	.classify .bitmap image {
		width: 69%;
	}

	.classify .option {
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		display: flex;
	}

	.classify .option>view {
		color: white;
		line-height: 60rpx;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
	}

	.classify .cancel {

		background: #addb8c;
		border-radius: 10rpx 0 0 10rpx;
	}

	.classify .determine {

		background: #009A44;
		border-radius: 0 10rpx 10rpx 0;
	}

	.classify .all_title {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.classify .show_all_sort {
		display: flex;
		flex-wrap: wrap;
		margin-left: 10rpx;
	}



	.classify .all-second {
		padding-bottom: 20rpx;
		background: white;



		text {
			background: #eee;
			border-radius: 10rpx;
			color: #999;
			margin-left: 10rpx;
			padding: 8rpx 23rpx;
			font-size: 22rpx;
			margin-top: 10rpx;
			display: inline-block;

		}

		.second_active {
			background: #E9FFDD;
			color: #57B127;
		}
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading .load_img {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}


	.classify .my_loading {
		color: #808080;
		font-size: 24rpx !important;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: white;
	}

	/deep/ .s-tab-nav {
		background: #eee;
		border-radius: 10rpx;
		color: #999;
		margin-left: 10rpx;
		padding: 2rpx 23rpx;
		font-size: 22rpx;
	}

	/deep/ .is-active {
		background: #FFF2EE;
		// border: 1px solid #57B127;
	}

	/deep/ .s-tabs-nav-wrap .s-tab-nav-view {
		height: 40rpx;
	}

	.classify /deep/ .u-tab-item {
		margin-top: 20rpx;
		background: #eee;
		font-size: 22rpx !important;
		margin-right: 10rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
		// color:#999!important;
		height: 50rpx !important;
		line-height: 32rpx !important;
		padding: 10rpx 20rpx !important;
	}

	.dao_btn {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		color: white;
		background-color: #f44b44;
		box-sizing: border-box;
		padding: 30rpx 0;
		text-align: center;
	}
	
	.site_box{
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
	}
	.site_name{
		font-weight: bold;
		color: black;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.site{
		display: flex;
		align-items: center;
		color: #838383;
		font-size: 24rpx;
	}
</style>